<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-icon color="#22abf9">
          <Histogram />
        </el-icon>
        &nbsp;
        <span style="color: #22abf9">项目信息</span>
      </div>
    </template>
    <div class="project-info">
      <el-tooltip :content="props.project.proj_no">
        <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis" class="project-info-item">
          项目代号：{{ props.project.proj_no }}
        </div>
      </el-tooltip>

      <el-tooltip :content="props.project.proj_name">
        <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis" class="project-info-item">
          项目名称：{{ props.project.proj_name }}
        </div>
      </el-tooltip>

      <div class="project-info-item">
        专业负责人&项目组长：<el-tag size="small" type="success">{{
          props.project.professional_leader || "未指定"
        }}</el-tag>
        <el-tag size="small" type="warning">{{
          props.project.team_leader || "未指定"
        }}</el-tag>
      </div>
    </div>
  </el-card>
</template>

<script setup>
  import { Histogram } from "@element-plus/icons-vue";
  const props = defineProps(["project"]);
</script>

<style scoped lang="scss">
  .card-header {
    display: flex;
    align-items: center;
    font-size: 17px;

    span {
      // background-color: aqua;

      border-radius: 4px;

      font-weight: 600;
    }
  }

  .project-info {
    display: flex;
    font-size: 14px;

    flex-direction: column;

    .project-info-item {
      margin-bottom: 10px;
    }

    .project-info-item:last-of-type {
      margin-bottom: 0;
    }
  }

  .box-card {
    width: 19%;
  }
</style>
